<template>
  <el-header height="100" class="header">
    <div class="col">
      <SmartImage
        v-if="logosrc"
        :height="iconheight ? iconheight : 72"
        :src="logosrc"
        auto-background
        background-type="auto"
        border-radius="8px"
        @analyzed="onImageAnalyzed"
      />
      <SmartImage
        v-if="logosrc2"
        :height="iconheight ? iconheight : 72"
        :src="logosrc2"
        class="ml-2"
        auto-background
        background-type="auto"
        border-radius="8px"
        @analyzed="onImageAnalyzed"
      />
    </div>
    <div class="col title text-center">
      <span
        class="beiji"
        :style="{ fontSize: titlesize ? titlesize : '48px' }"
        >{{ title }}</span
      >
    </div>
    <div class="col">
      <div class="row col-right-1">
        <div class="col-right-2">
          <div class="time1">{{ dayjs(timestamp).format("HH:mm:ss") }}</div>
          <div class="time2">
            <span class="year">
              {{ dayjs(timestamp).format("DD/MM/YYYY") }}</span
            >
            <span class="week">
              星期{{ week[dayjs(timestamp).get("day")] }}</span
            >
          </div>
        </div>
        <div class="col-right-3 text-right" v-if="!mydata">
          <!-- <div class="time2">
                        <span>当前账号: {{ t ? '管理员' : '用户' }}</span>
                    </div> -->
          <div class="time1">
            <router-link
              :to="{ name: '人员管理' }"
              custom
              v-slot="{ navigate }"
            >
              <el-button
                v-show="t"
                @click="navigate"
                type="primary"
                class="el-botton"
                >人员管理</el-button
              >
            </router-link>
            <router-link :to="{ name: '登录' }" custom v-slot="{ navigate }">
              <el-button
                @click="
                  () => {
                    logout();
                    navigate();
                  }
                "
                type="primary"
                class="el-botton"
                >退出</el-button
              >
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { useIntervalFn, useTimestamp } from "@vueuse/core";
import dayjs from "dayjs";
import { computed, inject, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import { asynclogout } from "../api";
import { Storekey } from "../interface";
import Studycodemodel from "../mysql_interface/studycodemodel";
import SmartImage from "../components/SmartImage.vue";

const p = defineProps<{
  scienceuser: Studycodemodel.Iscienceuser[];
  mydata?: boolean;
}>();
const store = useStore(Storekey);
const logosrc = inject<string>("icon");

const title = inject<string>("title");
const titlesize = inject<string>("titlesize");
const iconheight = inject<string>("iconheight");
const logosrc2 = inject<string>("logosrc2");

const timestamp = useTimestamp({ offset: 0 });
const week = ["天", "一", "二", "三", "四", "五", "六"];
onMounted(() => {
  t.value = !!p.scienceuser.find((t) => t.isadmin);
  start();
});

const user = computed(() => {
  return store.state.user?.name;
});

const t = ref(false);

watch(
  () => p.scienceuser,
  (e) => {
    t.value = !!e.find((t) => t.isadmin);
  }
);

function logout() {
  asynclogout();
}

function onImageAnalyzed(analysis: any) {
  console.log('图片分析结果:', analysis);
  // 这里可以根据分析结果做进一步处理
  // 比如调整页面样式、记录用户偏好等
}

function start() {
  window.AMap.plugin("AMap.Weather", function () {
    //创建天气查询实例
    new window.AMap.Weather().getLive(
      "北京市",
      function (err: string, data: any) {
        console.log(err);
        if (!err) {
          weather.value = data;
        }
      }
    );
  });
}

const { pause, resume, isActive } = useIntervalFn(() => {
  start();
}, 1000 * 60 * 60);

const srcs = [
  {
    type: ["晴", "有风", "平静", "未知", "热", "冷", "微风", "和风", "清风"],
    src: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Sunny.png",
  },
  {
    type: [
      "少云",
      "晴间多云",
      "多云",
      "阴",
      "霾",
      "中度霾",
      "重度霾",
      "严重霾",
      "浮尘",
      "扬沙",
      "沙尘暴",
      "强沙尘暴",
      "雾",
      "浓雾",
      "强浓雾",
      "轻雾",
      "大雾",
      "特强浓雾",
    ],
    src: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Sunny.png",
  },
  {
    type: [
      "阵雨",
      "雷阵雨",
      "雷阵雨并伴有冰雹",
      "小雨",
      "中雨",
      "大雨",
      "暴雨",
      "大暴雨",
      "特大暴雨",
      "强阵雨",
      "强雷阵雨",
      "极端降雨",
      "毛毛雨/细雨",
      "雨",
      "小雨-中雨",
      "中雨-大雨",
      "大雨-暴雨",
      "暴雨-大暴雨",
      "大暴雨-特大暴雨",
      "冻雨",
    ],
    src: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Rain.png",
  },
  {
    type: [
      "雪",
      "雨雪天气",
      "雨夹雪",
      "阵雨夹雪",
      "雪",
      "阵雪",
      "小雪",
      "中雪",
      "大雪",
      "暴雪",
      "小雪-中雪",
      "中雪-大雪",
      "大雪-暴雪",
    ],
    src: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Snow.png",
  },
  {
    type: [
      "有风",
      "疾风",
      "大风",
      "烈风",
      "风暴",
      "狂爆风",
      "飓风",
      "热带风暴",
      "龙卷风",
    ],
    src: "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Wind.png",
  },
];
const src = computed(() => {
  const data = srcs.find((e) => e.type.includes(weather.value.weather));
  if (data) {
    return data.src;
  }
  return "https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_weather/Blowing-snow.png";
});

const weather = ref({
  province: "北京",
  city: "北京市",
  adcode: "110000",
  weather: "晴",
  temperature: 8,
  windDirection: "西北",
  windPower: "≤3",
  humidity: "16",
  reportTime: "2023-01-06 16:38:43",
  info: "OK",
});
</script>

<style scoped>
.header {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 24px;
  --bs-gutter-x: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.beiji {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
}

.col-left {
  width: 640px;
}

.col-left img .col-right {
  width: 640px;
}

.time1 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.year {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  line-height: 14px;
  width: 103px;
  display: inline-block;
}

.week {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  align-items: center;
  text-align: center;
  color: #b3b5b7;
  display: inline-block;

  width: 72px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.temperature {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  position: relative;
}

.col-right-1 {
  width: 400px;
  margin-left: auto;
  margin-right: 0;
}

.text-right {
  text-align: right;
}

.temperature-c {
  font-size: 14px;
  display: inline-block;
  position: absolute;
  top: 10px;
  height: 24px;
}

.col-right-2 {
  width: 220px;
}

.col-right-3 {
  width: 178px;
}

.el-botton {
  --color-43: #545e72;
}

.time2 {
  color: #fff;
}

.ml-2 {
  margin-left: 12px;
}

.logo-img {
  /* 为透明背景图片添加白色背景和圆角 */
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4px;
  border-radius: 8px;

  /* 或者使用边框方案 */
  /* border: 2px solid rgba(255, 255, 255, 0.5); */

  /* 或者使用阴影方案 */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); */

  /* 或者使用渐变背景 */
  /* background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(240,240,240,0.8) 100%); */
}
</style>
